<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax-文件上传</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
    <div>
        <form id="form">
            用户名：<input type="text" name="username"/><br/>
            密码: <input name="password" type="password"/><br/>
            <input id="file" type="file" name="file" style="display: none;"/>
            <label for="file">
                <img id="img" src="" title="+" width="300" height="150" style="cursor: pointer;"/>
            </label>
            <button>上传</button>
        </form>
    </div>
    <script type="text/javascript">
        $(document).ready(function (){
            let currentPath;
            let currentFile;
            let inp = document.getElementById("file")
            let img = document.getElementById("img")
            // 给input框添加change事件，监听文件的改变
            inp.addEventListener("change",function(){
                // 获取到文件，inp.files是一个集合
                const file = inp.files[0];
                // 基础校验
                if(!file) {
                    // 点击了取消，将预览置空
                    img.src = currentPath;
                    // 清空currentFile
                    currentFile = undefined;
                    return;
                }
                // 文件格式判断，这里只能传图片
                if(!file.type.startsWith("image")) return window.alert('请选择图片');
                // 给currentFile赋值
                currentFile = file;
                // 读取文件，进行预览
                const fr = new FileReader();
                // 将文件读取为一个base64编码
                fr.readAsDataURL(file);
                // fr读取是一个异步操作，读取完会执行下面函数
                fr.onload = () => {
                    console.log(fr.result)
                    img.src = fr.result;
                }
            })
            // 表单的提交事件
            $("#form").submit(function (e){
                // 阻止表单submit事件的默认行为，否则会有个刷新的现象
                e.preventDefault()
                // 创建formdata，FormData会将form表单中带有name的字段自动处理成每一项
                var formData = new FormData(this);
                if(!currentFile) return window.alert("请选择文件再上传");
                // 发送ajav请求上传
                $.ajax({
                    // 服务器接口地址
                    url: '/upload',
                    // 请求方式
                    type: 'post',
                    // 参数
                    data: formData,
                    // 这两个参数在文件上传时较特殊，详细请看文章描述
                    contentType : false,
                    processData : false,
                    // 成功的回调函数
                    success : (resp) => {
                        console.log(resp)
                    }
                })
            })
        })
    </script>
</body>
</html>